<!DOCTYPE html>
<html lang='zh-CN'>
  <head>
    <meta charset='utf-8'>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
    <meta content='0' http-equiv='Expires'>
    <meta content='no-cache' http-equiv='Pragma'>
    <meta content='no-store,no-cache' http-equiv='Cache-Control'>
    <meta content='true' name='Handheldfriendly'>
    <title>登录</title>
    <style>
      body { background-image: url(assets/images/mobile-login-background.png);background-size:100%;background-repeat: no-repeat; }
      .Logo { padding-top:35%; margin:0 auto; text-align: center; width:100%;}
      .Logo img { width: 45px;}
      .slogan { color:#FFF; font-family:'冬青黑体简体中文 W3'; font-size:16px; text-align:center; width:100%; margin-top:12px;}
      .username{ width:90%; margin:0 auto;margin-top:27%; overflow:hidden;}
      .icon { margin-bottom:10px; float:left; width:15%;}
      .icon img { width: 22px; }
      .horizontal{ width:100%; background-color:#FFF; height:2px; margin-top:28px;}
      .password{ width:90%; margin:0 auto;margin-top:30px; overflow:hidden;}
      input[type='text'], input[type='password']{ float:left;color:#FFF;  font-size:20px; margin-left:155px;background:  transparent;border: none;padding-left: 0px;margin-left: 0px;width: 70%;line-height: 22px; }
      .submit-field{ text-align: center; width:90%; height:48px; margin:0 auto; margin-top:30px;}
      .submit-field a { width: 100%; height: 45px; font-size: 16px; border: 2px solid #FFF; border-radius: 10px; }
      .a:link, .a:hover, .a:visited, .a:active { text-decoration: none; color: white; }
      input::-webkit-input-placeholder { color:white; text-align: center; }
      input::-moz-placeholder { color:white; }
      input:focus { outline: 0; }
      .submit-field_pressed { background: rgb(210,210,210); color: #000; box-shadow: 0px 5px 6px rgb(160,160,160); border: none;}
    </style>
    <link href="assets/stylesheets/bootstrap.min.css?1458011778" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <img style="display:none;" src="assets/images/mobile-login-background.png" />
    <div class='container'>
      <div class='row'>
        <div class='col-xs-12'>
          <div class='Logo'>
            <img src='assets/images/mobile-login-logo.png'>
          </div>
          <div class='slogan'>融合共享，成于至善</div>
          <div class='username'>
            <div class='icon'>
              <img src='assets/images/mobile-login-username.png'>
            </div>
            <input autofocus='' class='wenzi' id='username' placeholder='请输入账号' type='text'>
              <div class='horizontal'></div>
            </input>
          </div>
          <div class='password'>
            <div class='icon'>
              <img src='assets/images/mobile-login-password.png'>
            </div>
            <input id='password' placeholder='请输入密码' type='password'>
              <div class='horizontal'></div>
            </input>
          </div>
          <div class='submit-field' onmouseup='Login.do(this);'>
            <a class='btn' style='color: white;'>登录</a>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    (function(){
        window.Mobile = {
          isIOS: function() {
            return navigator.userAgent.match(/iPhone|iPad/i);
          },
          isAndroid: function() {
            return navigator.userAgent.match(/Android/i);
          }
        }
        window.onerror = function(e) {
          if(Mobile.isIOS() && MobileBridge.connectWebViewJavascriptBridge) {
            MobileBridge.connectWebViewJavascriptBridge(function(bridge){
              bridge.callHandler('jsException', {'ex': e}, function(response) {});
            })
          }
          else if(Mobile.isAndroid() && window.AndroidJSBridge && window.AndroidJSBridge.jsException) {
            window.AndroidJSBridge.jsException(e);
          }
          else {
            console.log(typeof(e));
            console.log(e);
          }
        }
        window.Login = {
          connectWebViewJavascriptBridge: function(callback) {
            if(window.WebViewJavascriptBridge) {
              callback(WebViewJavascriptBridge)
            }
            else {
              document.addEventListener('WebViewJavascriptBridgeReady', function() {
                callback(WebViewJavascriptBridge)
              }, false)
            }
          },
          mousedown: function(el) {
            el.className += " submit-field_pressed";
          },
          do: function(el) {
            el.className = el.className.replace("submit-field_pressed", "");
    
            var username = document.getElementById("username").value.trim();
            var password = document.getElementById("password").value.trim();
            //alert(username + " - " + password);
    
            if(Mobile.isIOS()) {
              Login.connectWebViewJavascriptBridge(function(bridge){
                bridge.callHandler('iosCallback', {'username': username, 'password': password}, function(response) {
                });
              })
            }
            else if(Mobile.isAndroid()) {
              window.AndroidJSBridge.login(username, password);
            }
          }
        }
    }).call(this)
    </script>
  </body>
</html>
